﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MVCStudent.aspx.cs" Inherits="MiaoWeiProject.luolei.MVCStudent" %>
<!DOCTYPE html>
<%@ Import Namespace="Models" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
          
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }
        /*头部样式*/
        #heard {
            width: 100%;
            height: 70px;
            border: 1px solid red;
        }
        /*图片旋转样式*/
        #xuanzhuan {
            width: 100%;
            height: 395px;
            background: url('luoleiImages/banner_bgRepeat.jpg') repeat-x;
            text-align: center;
            position: relative;
            z-index: 5;
            color: #fff;
            overflow: hidden;
            padding-top: 43px;
            border: 1px solid black;
        }

        #xuanzhuan_tupian {
            height: 290px;
            width: 70%;
            border: 1px solid red;
            margin-top: 20px;
            margin: auto;
        }

        #xuanzhuan_tupianxia {
            height: 45px;
            width: 1200px;
            background-image: url('luoleiImages/banner_shadow.png');
            margin: 0 auto;
        }
        /*导航样式*/
        #daohang {
            width: 100%;
            height: 470px;
            border: 1px solid blue;
        }

        #daohang_shang {
            height: 50%;
            width: 100%;
            background: url('luoleiImages/banner_bgRepeat.jpg');
            position: relative;
            z-index: 4;
            opacity: 0.8;
            border: 1px solid red;
        }

        #qianduan_daohang_tu {
            width: 79%;
            height: 50px;
            background: url('luoleiImages/pipe_label.png') no-repeat 0 30px;
            margin: 0 auto;
            padding-top: 32px;
            position: relative;
            border: 1px solid red;
        }

            #qianduan_daohang_tu ul {
                display: flex;
                width: 95%;
                margin: 0 auto;
                justify-content: space-between;
            }

                #qianduan_daohang_tu ul li {
                    background: #f4f4f6 url('luoleiImages/label_bg.png') repeat-x;
                    text-align: center;
                    line-height: 50px;
                    height: 50px;
                    width: 7%;
                    /*border:1px solid red;*/
                    z-index: 100;
                    cursor: pointer;
                    background: #f4f4f6;
                    box-shadow: 3px 5px 20px 0 rgba(0,0,0,0.3);
                    border-radius: 0 0 6px 6px;
                }

                    #qianduan_daohang_tu ul li:hover {
                        padding-top: 20px;
                        width: 90px;
                        /*line-height:70px;*/
                        background-color: #ef3e3e;
                    }

                    #qianduan_daohang_tu ul li a {
                        font-size: 1.2em;
                    }
        /*有搜索框的哪一行样式*/
        #suosuo {
            height: 100px;
            width: 1200px;
            margin: 0 auto;
            border: 1px solid red;
            display: flex;
            justify-content: space-between;
        }

        .guide {
            width: 608px;
            height: 65px;
            display: flex;
            justify-content: space-between;
            border: 1px solid red;
            margin-top: 20px;
        }

        .guideBo:hover {
            padding-top: 20px;
        }

        .guideBox {
            width: 194px;
            height: 7px;
            border-radius: 3px;
            background: #928f9c;
            margin-top: 58px;
            position: relative;
            /*float: left;*/
        }

        .guide .guideBlock {
            width: 174px;
            height: 50px;
            background: linear-gradient( #f8f8f9 80%, #d6d6dc);
            position: absolute;
            bottom: 1px;
            left: 10px;
            border-radius: 7px 7px 0 0;
            box-shadow: 0 -4px 0 0 #e2e2e6;
            line-height: 0;
            text-align: center;
            cursor: pointer;
            color: #838383;
        }

            .guide .guideBlock:hover span {
                height: 60px;
                line-height: 60px;
                color: #e15671;
            }

        .guideBlock:hover {
            height: 60px;
        }

        .guideBlock span {
            display: inline-block;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            vertical-align: middle;
            padding-left: 5px;
        }

        .search-box {
            /*position: absolute;
    right: -120px;
    top: 4px;*/
            /*border:1px solid red;*/
            width: 303px;
            height: 18px;
            padding: 22px 223px 39px 92px;
            background: url('luoleiImages/search-bg.png');
            margin-left: 80px;
            margin-top: 20px;
        }

        .guideBlock i {
            width: 30px;
            height: 40px;
            display: inline-block;
            vertical-align: middle;
            background: url('luoleiImages/guide.png') no-repeat;
            background-position-x: 0%;
            background-position-y: 0%;
        }

            .guideBlock i.newuser {
                background-position: -5px 0;
            }

        i.vip {
            background-position: -5px -40px;
        }

        .guideBlock i.take {
            background-position: -5px -80px;
        }

        .search-box .text {
            width: 308px;
            height: 100%;
            font-size: 18px;
            line-height: 18px;
            border: none;
        }

        .search-box .btn {
            width: 53px;
            height: 53px;
            /*position: absolute;*/
            right: 136px;
            bottom: 21px;
            border: 1px solid red;
        }
        /*导航下面的样式*/
        #daohang_xia {
            height: 50%;
            width: 100%;
            background: url('luoleiImages/banner_bgRepeat.jpg');
            background-position-y: 270px;
            z-index: 4;
            opacity: 0.8;
            border: 1px solid red;
        }

        #xia_kuang {
            width: 1200px;
            height: 198px;
            border: 1px solid red;
            margin: 0 auto;
            padding: 10px;
            background-image: url('luoleiImages/recommend_bg.png');
            background-repeat: no-repeat;
         
            position: relative;
        }
        .recommend .title {
    height: 29px;
    padding: 15px 27px 0;
   
}
        .title .left {
            line-height: 29px;
            font-size: 20px;
            color: #6b6578;
            text-shadow: -1px -1px 1px #ccc,1px 1px 1px #fff;
            position:absolute;
            top:30px;
            left:40px;
            /*float: left;*/
        }
 
        /*第一阶段前端导航样式*/
        #qianduan {
            width: 100%;
            height: 167px;
            border: 1px solid red;
            background: url('luoleiImages/class-box-top-bg.jpg') repeat;
            overflow:hidden;
        }

        #qianduan_daohang {
            height: 100px;
            width: 70%;
            border: 1px solid red;
            margin: 67px auto;
            background-image:url('luoleiImages/lv1-title.png');
            background-repeat:no-repeat;
            position:relative;
        }

       #qianduan_daohang  p.percent {
    position: absolute;
    left: 35px;
    top: 2px;
    height: 18px;
    font-size: 12px;
    width: 94px;
    text-align: center;
    color: #e89551; 
     width:10px;
}
       
        p.percent span {
    font-size: 18px;
    vertical-align: baseline;
     color: #e89551;
 
}
        #qianduan_daohang h3 {
    float: left;
    padding-left: 96px;
    width: 278px;
    height: 91px;
    line-height: 91px;
    font-size: 24px;
    color: 
    #fff;
    font-weight: 600;
}
       #qianduan_daohang   p {
    float: left;
    height: 84px;
    line-height: 84px;
    font-size: 16px;
    color: 
    #fff;
}

        /*第一阶段前端内容样式*/
        #qianduan_content {
            width: 100%;
            height: 969px;
            background: url('luoleiImages/lv1-bg.jpg') repeat 0 0;
            border: 1px solid green;
        }

        #qianduan_conter {
            height: 98%;
            width: 70%;
            border: 1px solid red;
            margin: 10px auto;
        }

        #backone {
            width: 100%;
            height: 90px;
            background: url('luoleiImages/class-box-top-bg-repeat-lv2.jpg') repeat-x 0 0;
            border: 1px solid black;
        }
        .class-list {
    font-size: 0;
    padding:10px 0;
    position: relative;
            top: 1px;
            left: -1px;
        }
        .class-list-num {
    text-align: center;
    line-height: 71px;
}
         .class-list-num {
    width: 70px;
    height: 71px;
    padding: 10px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    text-align: center;
    line-height: 71px;
    vertical-align: middle;
}
          .class-list-num {
    background: url('luoleiImages/class-list-num.png') no-repeat center;
}
           .num {
    background: url('luoleiImages/orange-num.png') no-repeat;
    display: inline-block;
*display: inline;
*zoom: 1;
width: 14px;
height: 24px;
vertical-align: middle;
        background-position-x: 0%;
        background-position-y: 0%;
}
           .num-0 {
                  
    background-position: 0 0;
}
           .class-list-num .num-1 {
    background-position: -15px 0;
}
            .class-one-level-left {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 70px;
    padding-left: 34px;
    margin-left: 28px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
            .class-one-level-left {
    background: url('luoleiImages/class-level1-bg-left.png') no-repeat left center;
}
            .class-one-level-right {
    background: url('luoleiImages/class-level1-bg-right.png') no-repeat right center;
}
             .class-one-level-btn-left {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 70px;
    padding-left: 34px;
    margin-left: -34px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background: url('luoleiImages/class-level-left.png') no-repeat left center;
}
              .class-one-level-btn-right {
    height: 70px;
    padding-right: 24px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background: url('luoleiImages/class-level-right.png') no-repeat right center;
}
              .class-one-level-btn-right h4 {
    height: 70px;
    margin-left: -5px;
    margin-right: 18px;
    font-size: 16px;
    font-weight: normal;
    color: 
    #000;
    vertical-align: middle;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
              .class-text {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 70px;
    vertical-align: middle;
    line-height: 70px;
    font-size:16px;
}
               .class-one-level-line {
    position: absolute;
    left: -38px;
    top: 50%;
    margin-top: -3px;
    height: 6px;
    width: 40px;
}
               .class-one-level-line {
    background: url('luoleiImages/class-level1-line.png') repeat-x 0 0;
}
              .class-video-num-left {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 22px;
    padding-left: 10px;
    vertical-align: middle;
    background: url('luoleiImages/class-video-num-left.png') no-repeat left center;
}
              .class-video-num-righta{
                   height: 22px;
    line-height: 22px;
    padding-right: 10px;
    background: url('luoleiImages/class-video-num-right.png') no-repeat right center;
    color: 
    #857f94;
    font-size: 14px;
              }
               .class-video-num-right {
    height: 22px;
    line-height: 22px;
    padding-right: 10px;
    background: url('luoleiImages/class-video-num-right.png') no-repeat right center;
    color: 
    #857f94;
    font-size: 14px;
}
               .class-level-expand {
    position: absolute;
    right: -88px;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 90px;
    cursor: default;
}
               .class-two-level-box {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    margin-left: 63px;
    padding-left: 68px;
    position: relative;
}
                .class-two-level:last-child {
    margin-bottom: 0;
}
                .class-two-level:first-child {
    margin-top: 0;
}
                .class-one-level-right {
    height: 70px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
                 .class-one-level-right {
    background: url('luoleiImages/class-level1-bg-right.png') no-repeat right center;
}
                 .class-one-level-btn-left {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 70px;
    padding-left: 34px;
    margin-left: -34px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background: url('luoleiImages/class-level-left.png') no-repeat left center;
}
                 .class-one-level-btn-right {
    height: 70px;
    padding-right: 24px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background: url('luoleiImages/class-level-right.png') no-repeat right center;
}
                 .class-level-expand {
    background: url('luoleiImages/class-level1-expand.png') no-repeat 0 0;
}
                .only  .class-two-level-line {
    background: url('luoleiImages/class-two-level1-only.png') repeat;
}
                .class-two-level-box .class-two-level-line {
    width: 71px;
    height: 90px;
    position: absolute;
    left: -70px;
    top: 50%;
    margin-top: -45px;
   
}
                  #aa{
       height:30px;
       width:30px;
       /*border:1px solid red;*/
       position:absolute;
       top:-50px;
       left:10px;
       z-index:100;
       background: url('luoleiImages/class-level1-slant2.png') repeat-y;
   }
                 .list-line2 {
    width: 57px;
    height: 79px;
    position: absolute;
    background: url('luoleiImages/class-level1-slant2.png') repeat-y;
    left: 17px;
    top: -37px;
    z-index: 1;
}
                 .class-list-num .num-2 {
    background-position: -30px 0;
}
                 .list-line {
    width: 57px;
    height: 72px;
    position: absolute;
    background: url('luoleiImages/class-level1-slant.png') no-repeat;
    left: 16px;
    top: -36px;
    z-index: 1;
}
                 .class-list-num .num-3 {
    background-position: -46px 0;
}
                 .class-list-num .num-4 {
    background-position: -63px 0;
}
                  .class-list-num .num-5 {
    background-position: -81px 0;
}
                   .list-line-vertical {
    background: url('luoleiImages/class-level1-line-vertical.png') repeat-y;
}
                   .class-arrow {
    background: url('luoleiImages/class-level1-arrow.png') no-repeat center bottom;
}
                    /*.class-two-level-line {
    background: url('luoleiImages/class-two-level1-middle.png');
}
   /*.class-two-level:first-child  .class-two-level-line {
    background: url('luoleiImages/class-two-level1-first.png');
}*/   
.zz .class-two-level:first-child .class-two-level-line {
    background: url('luoleiImages/class-two-level1-first.png');
}
   .class-arrow {
    position: absolute;
    width: 53px;
    height: 200px;
    top: 78px;
    left: 19px;
    z-index: 1;
}
   .list-line-vertical {
    width: 12px;
    position: absolute;
    left: 39px;
    bottom: 78px;
    z-index: 1;
}
    .class-two-level-box {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    margin-left: 63px;
    padding-left: 68px;
    position: relative;
}
    class-two-level-box .class-two-level:first-child {
    margin-top: 0;
}
    .class-two-level-box .class-two-level {
    display: block;
    margin: 20px 0;
        margin-top: 20px;
    position: relative;
    z-index: 0;
}
    .class-two-level-box .class-two-level {
    display: block;
    margin: 20px 0;
    position: relative;
    z-index: 0;
}
    .class-one-level-left {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 70px;
    padding-left: 34px;
    margin-left: 28px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
    .class-two-level-box .class-two-level-line {
    width: 71px;
    height: 90px;
    position: absolute;
    left: -70px;
    top: 50%;
    margin-top: -45px;
}
    .class-two-level-box .class-two-level-line {
    width: 71px;
    height: 90px;
    position: absolute;
    left: -70px;
    top: 50%;
    margin-top: -45px;
   
}
     .class-two-level-box .class-two-level-line {
    width: 71px;
    height: 90px;
    position: absolute;
    left: -70px;
    top: 50%;
    margin-top: -45px;
  
}
        .class-two-level-box .class-two-level-line {
            width: 71px;
            height: 90px;
            position: absolute;
            left: -70px;
            top: 50%;
            margin-top: -45px;
            
        }
         .class-two-level-line {
    background: url('luoleiImages/class-two-level1-middle.png');
}
     .class-two-level-line {
    background: url('luoleiImages/class-two-level1-middle.png');
}
     .last .class-two-level-line {
    background: url('luoleiImages/class-two-level1-last.png');
}
      .vip-icon {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 31px;
    height: 70px;
    background: url('luoleiImages/class-vip-icon.png') no-repeat left center;
    margin-right: 5px;
    vertical-align: middle;
}
   
/*第二阶段小试牛刀样式*/
        #two {
            height: 2345px;
            width: 100%;
            border: 1px solid yellow;
            background: url('luoleiImages/lv2-bg.jpg') repeat 0 0;
        }

        #two_content {
            height: 98%;
            width: 70%;
            border: 1px solid red;
            margin: 20px auto;
        }

        #backtwo {
            width: 100%;
            height: 87px;
            background: url('luoleiImages/class-box-top-bg-repeat-lv3.jpg') repeat-x 0 0;
        }
        .phase-name {
    width: 614px;
    height: 93px;
    position: relative;
    margin-bottom: 25px;
}
        .phase-name {
    background: url('luoleiImages/lv2-title.png') no-repeat;
}
         .percent {
    position: absolute;
    left: 0;
    top: 34px;
    height: 18px;
    font-size: 12px;
    width: 94px;
    text-align: center;
    color: #71bb50;
}
          canvas {
    width: 70px;
    height: 70px;
    position: absolute;
    top: -23px;
    left: 12px;
}
        #two_content  h3 {
    float: left;
    padding-left: 96px;
    width: 278px;
    height: 91px;
    line-height: 91px;
    font-size: 24px;
    color: 
    #fff;
    font-weight: 600;
}
          #two_content  h3 span {
    font-weight: normal;
}
           #two_content p {
    float: left;
    height: 84px;
    line-height: 84px;
    font-size: 16px;
    color: 
    #fff;
}
           .percent span {
    font-size: 18px;
    vertical-align: baseline;
}
           .class-common-box .class-list-num {
    width: 70px;
    height: 71px;
    padding: 10px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    text-align: center;
    line-height: 71px;
    vertical-align: middle;
}
           #two_content  .class-list {
    font-size: 0;
    padding: 0 0;
    position: relative;
    -webkit-text-size-adjust: none;
}
            #two_content .num {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 14px;
    height: 24px;
    vertical-align: middle;
}
        #two_content .class-list-num {
    background: url('luoleiImages/class-list-num-lv2.png') no-repeat center;
}
     #two_content  .class-list-num .num {
            background: url('luoleiImages/green-num.png') no-repeat;
        }
           #two_content  .class-list-num  .num-6 {
    background-position: -98px 0;
}
          #two_content  .class-one-level-left {
    background: url('luoleiImages/class-level2-bg-left.png') no-repeat left center;
}
            #two_content  .class-one-level-right {
    background: url('luoleiImages/class-level2-bg-right.png') no-repeat right center;
}
           #two_content .class-one-level-line {
    background: url('luoleiImages/class-level2-line.png') repeat-x 0 0;
}
             #two_content .list-line-vertical {
    width: 12px;
    position: absolute;
    left: 39px;
    bottom: 78px;
    z-index: 1;
}
         #two_content .list-line-vertical {
    background: url('luoleiImages/class-level2-line-vertical.png') repeat-y;
}
          #two_content .class-list-num .num-7 {
    background-position: -115px 0;
}
           #two_content  .class-level-expand {
    background: url('luoleiImages/class-level2-expand.png') no-repeat 0 0;
}
          #two_content .class-two-level:first-child .class-two-level-line {
    background: url('luoleiImages/class-two-level2-first.png');
}
          #two_content   .class-two-level-line {
    background: url('luoleiImages/class-two-level2-middle.png');
}
          #two_content  .last .class-two-level-line {
    background: url('luoleiImages/class-two-level2-last.png');
}
           #two_content .llist-line-vertical {
    width: 12px;
    position: absolute;
    left: 39px;
    bottom: 78px;
    z-index: 1;
}
           #two_content .llist-line-vertical {
    background: url('luoleiImages/class-level2-line-vertical.png') repeat-y;
}
           #two_content  .cclass-list {
    font-size: 0;
  margin-top:-20px;
    position: relative;
    -webkit-text-size-adjust: none;
}
        #two_content  .class-list-num .num-8 {
    background-position: -131px 0;
}  
        #two_content  .class-list-num .num-9 {
    background-position: -148px 0;
}
       #two_content  .class-list-num .num-1 {
    background-position: -15px 0;
}
       #two_content .class-arrow {
    background: url('luoleiImages/class-level2-arrow.png') no-repeat center bottom;
}
        /*第三阶段渐入佳境样式*/
        #three {
            height: 2317px;
            border: 1px solid red;
            width: 100%;
            background: url('luoleiImages/lv3-bg.jpg') repeat 0 0;
        }

        #three_content {
            height: 98%;
            width: 72%;
            border: 1px solid red;
            margin: 20px auto;
        }
         #three_content .percent {
    color: 
    #ec6c8d;
}
        #backthree {
            width: 100%;
            height: 153px;
            background: url('luoleiImages/class-box-top-bg-repeat-lv4.jpg') repeat-x 0 0;
        }
        #three_content .percent span {
    font-size: 18px;
    vertical-align: baseline;
}
        #three_content .percent {
    position: absolute;
    left: 0;
    top: 34px;
    height: 18px;
    font-size: 12px;
    width: 94px;
    text-align: center;
}
        #three_content .phase-name {
    background: url('luoleiImages/lv3-title.png') no-repeat;
}
                      #three_content h3 span {
    font-weight: normal;
}
        #three_content   h3 {
 
    float: left;
    padding-left: 96px;
    width: 278px;
    height: 91px;
    line-height: 91px;
    font-size: 24px;
    color: 
    #fff;
    font-weight: 600;
    
}
         #three_content p {
    float: left;
    height: 84px;
    line-height: 84px;
    font-size: 16px;
    color: 
    #fff;
}
          #three_content  .num {
    background: url('luoleiImages/red-num.png') no-repeat;
        background-position-x: 0%;
        background-position-y: 0%;
}
           #three_content  .class-list-num .num-1 {
    background-position: -15px 0;
}
            #three_content  .class-list-num .num-2 {
    background-position: -30px 0;
}
            #three_content .class-list {
    font-size: 0;
    padding: 0 0;
    position: relative;
    -webkit-text-size-adjust: none;
}
             #three_content .only .class-two-level-line {
    background: url('luoleiImages/class-two-level1-only.png') !important;
}
            #three_content .class-two-level:first-child .class-two-level-line {
    background: url('luoleiImages/class-two-level1-first.png');
}
             #three_content  .class-list-num .num-3 {
    background-position: -46px 0;
}
              #three_content .class-list-num .num-4 {
    background-position: -63px 0;
}
               #three_content .class-list-num .num-5 {
    background-position: -81px 0;
}
                 #three_content .class-list-num .num-6 {
    background-position: -98px 0;
}
                  #three_content  .class-list-num .num-7 {
    background-position: -115px 0;
}
        #three_content .class-list-num .num-8 {
            background-position: -131px 0;
        }
                /*#three_content  .list-line-vertical {
    background: url('/img/pc/study_2018/class-level1-line-vertical.png') repeat-y;
}*/
        /*第四阶段得心应手样式*/
        .class-one-level-btn-left:hover .class-one-level-btn-right {
    background: url('luoleiImages/class-level-right-hover.png') no-repeat right center;
}
        .class-one-level-btn-left:hover {
    background: url('luoleiImages/class-level-left-hover.png') no-repeat left center;
}
        #four {
            height: 2800px;
            width: 100%;
            background: url('luoleiImages/lv4-bg.jpg') repeat 0 0;
            border: 1px solid red;
        }

        #four_content {
            height: 98%;
            width: 70%;
            border: 1px solid red;
            margin: 20px auto;
        }
         #four_content .phase-name {
    width: 614px;
    height: 93px;
    position: relative;
    margin-bottom: 25px;
    width: 826px !important;
background: url('luoleiImages/lv4-title.png') no-repeat;

}
         #four_content  .percent span {
    font-size: 18px;
    vertical-align: baseline;
}
          #four_content .percent {
    color: 
    #2bc2d7;
}
         #four_content  h3 {
    float: left;
    padding-left: 96px;
    width: 278px;
    height: 91px;
    line-height: 91px;
    font-size: 24px;
    color: 
    #fff;
    font-weight: 600;
}
              #four_content h3 span {
    font-weight: normal;
}
        #four_content  p {
    float: left;
    height: 84px;
    line-height: 84px;
    font-size: 16px;
    color: 
    #fff;
}
        #four_content  .class-one-level-left {
    margin-left: 8px !important;
    background: url('luoleiImages/class-level4-bg-left.png') no-repeat left center;
}
        #four_content  .class-one-level-right {
    background: url('luoleiImages/class-level4-bg-right.png') no-repeat right center;
}
         #four_content .class-level-expand {
    background: url('luoleiImages/class-level4-expand.png') no-repeat 0 0;
}
         #four_content   .class-two-level:first-child .class-two-level-line {
    background: url('luoleiImages/class-two-level4-first.png');
}
          #four_content .last .class-two-level-line {
    background: url('luoleiImages/class-two-level4-last.png');
}
          #four_content .class-two-level-line {
    background: url('luoleiImages/class-two-level4-middle.png');
}
            #four_content .only .class-two-level-line {
    background: url('luoleiImages/class-two-level4-only.png') !important;
}
        #backfour {
            width: 100%;
            height: 87px;
            background: url('luoleiImages/class-box-top-bg-repeat-lv5.jpg') repeat-x 0 0;
        }
        /*第五阶段玩转自如样式*/
        #five {
            height: 4250px;
            border: 1px solid red;
            width: 100%;
            background: url('luoleiImages/lv5-bg.jpg') repeat 0 0;
        }

        #five_content {
            height: 98%;
            width: 70%;
            border: 1px solid red;
            margin: 35px auto;
        }

        #backfive {
            width: 100%;
            height: 132px;
            background: url('luoleiImages/footer-top.png') repeat center 0;
        }
        #five_content .phase-name {
    background: url('luoleiImages/lv5-title.png') no-repeat;
}
       #five_content  .percent span {
    font-size: 18px;
    vertical-align: baseline;
}
     #five_content  .percent {
    color: 
    #e89551;
}
      #five_content  h3 {
  float: left;
padding-left: 96px;
width: 278px;
height: 91px;
line-height: 91px;
font-size: 24px;
color:
#fff;
font-weight: 600;
}
     #five_content   p {
    float: left;
    height: 84px;
    line-height: 84px;
    font-size: 16px;
    color: 
    #fff;
}
     #five_content h3 span {
    font-weight: normal;
}
      #five_content .class-two-level:first-child .class-two-level-line {
    background: url('luoleiImages/class-two-level1-first.png');
}
      #five_content  .class-two-level:first-child .class-two-level-line {
    background: url('luoleiImages/class-two-level1-first.png');
}
      #five_content  .only .class-two-level-line {
    background: url('luoleiImages/class-two-level1-only.png') !important;
}
      /*//推荐课程样式*/
      .bd{
          overflow:hidden;
      }
      .bd ul{
          width:1200px;
          /*display:flex;
          justify-content:space-between;*/
         overflow:hidden;
          margin-top:50px;
        padding-left:25px;
          /*border:1px solid black;*/
        
      }
      .bd ul li{ float:left;
                 margin-right:20px;
          height:120px;
          width:182px;
          /*border:1px solid red;*/
          width:18.2%;
          border-radius:5px;
          background-color:#00c1c9;
          position:relative;
       
      }
      .bd ul li a.zi{
       position:absolute;
       left:0;
       top:10px;
       color:white;
      }
      #xia_kuang{
          padding-left:25px;
      }
       .bd ul li.on1 {
            background: #00c1c9 url('luoleiImages/icon.png') no-repeat right;
        }
        .bd ul li.on2{
            background:
    #ff9a2f url('luoleiImages/icon3.png') no-repeat right;
}
                .bd ul li.on3{
        background:
    #e26f90 url('luoleiImages/icon4.png') no-repeat right;
}
      
                        .bd ul li.on4{
            background:
    #61c154 url('luoleiImages/icon5.png') no-repeat right;
}
      
                                .bd ul li.on5{
            background:
   #908aea url('luoleiImages/icon2.png') no-repeat right;
}
      
                                .bd ul li.on6{
            background:
   #908aea url('luoleiImages/icon2.png') no-repeat right;
            
}
                                
                                .bd ul li.on7{
            background:
   #908aea url('luoleiImages/icon2.png') no-repeat right;
            
}
                                a.sPrev,
a.sNext {
	position: absolute;
	left: 3%;
	top: 55%;
	margin-top: -25px;
	display: block;
	width: 50px;
	height: 60px;
	opacity: 0.3;
	z-index: 1111;
	background: url(luoleiImages/slider-arrow.png) -100px 15px no-repeat #000000;
}

a.sNext {
	left: auto;
	right: 3%;
	background-position: 15px 15px;
}

a.sNext:hover,
a.sPrev:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
}
        /*尾部导航样式*/
        #foot {
            height: 144px;
            width: 100%;
            border: 1px solid green;
        }
        /*窗帘样式*/
        .label_wrap {
            width: 1200px;
            background: url('luoleiImages/pipe_label.png') no-repeat 0 30px;
            margin: 0 auto;
            padding-top: 32px;
            position: relative;
            top: 0px;
            left: 0px;
        }

        .label_box {
            width: 1100px;
            height: 94px;
            margin: 0 auto;
            position: relative;
        }
       
        .label_item {
            background: #f4f4f6 url('luoleiImages/label_bg.png') repeat-x;
            line-height: 40px;
            font-size: 16px;
            position: absolute;
            border-radius: 0 0 6px 6px;
            box-shadow: 3px 5px 20px 0 rgba(0,0,0,0.3);
            cursor: pointer;
            white-space: nowrap;
        }

            .label_item a {
                display: block;
                overflow: hidden;
                padding: 7px 20px 0;
                padding-top: 7px;
                color: inherit;
                text-decoration: none;
            }
        /*.label_item a:hover{
               background-color:red;
             }*/
 #xia_kuang .title{
     height:55px;
     /*border:1px solid red;*/
 }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
           
          
            var he;
            var sum = 0;
            $(".class-video-num-right").each(function () {
                sum = sum + parseInt($(this).text().substring(1, 2));
                console.log($(this).text().substring(1, 2));
            });
            var one = parseInt($(".class-video-num-righta").text().substring(1, 3));
            he = sum + one;
            console.log(he);
            $(".oneji").text(he + "集（预计学习1个月）");
            ////获取数据
            //$.ajax({
            //    type: "post",
            //    url: "Mulu.ashx",
            //    dataType: "json",
            //    success: function (rest) {
            //        $.each(rest,function (i,item){
            //            var value = item.ZhangjieID;
            //            var text = item.Smallzhangjie;
                      
                         
            //            $(".zhu").append("<span class='class-text'>"+text+"</span>");
            //        });
            //    }
            //});
          
            //$("span.class-text").click(function() {
            //    alert(1);
            //});
        })

    </script>
        <!--  HEAD -->
<link rel="stylesheet" type="text/css" href="images/engine/style.css" media="screen" />
<script type="text/javascript" src="images/engine/jquery.js"></script>
    <script src="js/jquery.SuperSlide.2.1.2.js"></script>
<!--  HEAD. -->
</head>
<body>
    <form id="form1" runat="server">
        <%-- 头部--%>
        <div id="heard">
        </div>
        <%--图片旋转--%>
            <div id="xuanzhuan">
            <div id="xuanzhuan_tupian">
    		<!-- 主体部分 -->
		<div id="wowslider-container">
			<div class="ws_images">
				<ul>
					<li><a href="#"><img src="images/data/images/slide1.png" alt="123" title="" /></a></li>
					<li><a href="#"><img src="images/data/images/slide2.png" alt="456" title="标题1234" /></a>标题1234</li>
					<li><a href="#"><img src="images/data/images/slide3.png" alt="789" title="标题1234" /></a>标题1234</li>
					<li><iframe width="100%" height="100%" frameborder="0" allowfullscreen></iframe><img src="images/data/images/slide5new.jpg" alt="012" title="" /></li>
				</ul>
			</div>
			<div class="ws_bullets">
				<div>
					<a href="#"><img src="images/data/tooltips/slide1.png" alt="CSS3 Slider" /></a>
					<a href="#"><img src="images/data/tooltips/slide2.png" alt="CSS Slideshow" /></a>
					<a href="#"><img src="images/data/tooltips/slide3.png" alt="CSS Gallery" /></a>
					<a href="#"><img src="images/data/tooltips/slide5new.jpg" alt="Video Support" /></a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="images/engine/wowslider.js"></script>
		<script type="text/javascript" src="images/engine/script.js"></script>
		<!-- 主体部分. -->
</div>
            </div>
        <%--    <div id="xuanzhuan_tupianxia"></div>--%>
       <%-- </div>--%>
        <%--  导航栏--%>
        <div id="daohang">
            <div id="daohang_shang">
                <%--<div id="qianduan_daohang_tu">
                      <ul>
                          <li><a href="#" style="color:rgb(162,53,0)">Vue</a></li>
                          <li><a href="#" style="color:rgb(115,165,0)">React</a></li>
                          <li><a href="#" style="color:rgb(0,164,204)">Node</a></li>
                          <li><a href="#" style="color:rgb(94,49,208)">H5移动端</a></li>
                          <li><a href="#" style="color:rgb(7,166,134)">公开课</a></li>
                          <li><a href="#" style="color:rgb(49,49,49)">HTML/CSS</a></li>
                           <li><a href="#" style="color:rgb(197,70,70)">JavaScript</a></li>
                           <li><a href="#" style="color:rgb(162,53,0)">实战案列</a></li>
                           <li><a href="#" style="color:rgb(115,165,0)">微信小程序</a></li>
                           <li><a href="#" style="color:rgb(0,164,204)">Canvas</a></li>
                           <li><a href="#" style="color:rgb(94,49,208)">前端工具</a></li>
                           <li><a href="#" style="color:rgb(7,166,134)">webpack</a></li>
                           <li><a href="#" style="color:rgb(49,49,49)">Git</a></li>
                      </ul> 
    
                  </div>--%>
                <div class="label_wrap">
                    <div class="label_box">
                        <div class="label_item" style="color: rgb(162, 53, 0); left: 0px; z-index: 13;"><a href="#" target="_blank" style="padding-top: 7px;"><em>Vue</em></a></div>
                        <div class="label_item" style="color: rgb(115, 165, 0); left: 90px; z-index: 12;"><a href="#" target="_blank" style="padding-top: 7px;"><em>React</em></a></div>
                        <div class="label_item" style="color: rgb(0, 164, 204); left: 190px; z-index: 11;"><a href="#" target="_blank" style="padding-top: 7px;"><em>Node</em></a></div>
                        <div class="label_item" style="color: rgb(94, 49, 208); left: 288px; z-index: 10;"><a href="#" target="_blank" style="padding-top: 7px;"><em>H5移动端</em></a></div>
                        <div class="label_item" style="color: rgb(7, 166, 134); left: 412px; z-index: 9;"><a href="#" target="_blank" style="padding-top: 7px;"><em>公开课</em></a></div>
                        <div class="label_item" style="color: rgb(49, 49, 49); left: 512px; z-index: 8;"><a href="#" target="_blank" style="padding-top: 7px;"><em>HTML/CSS</em></a></div>
                        <div class="label_item" style="color: rgb(197, 70, 70); left: 643px; z-index: 7;"><a href="#" target="_blank" style="padding-top: 7px;"><em>JavaScript</em></a></div>
                        <div class="label_item" style="color: rgb(162, 53, 0); left: 767px; z-index: 6;"><a href="#" target="_blank" style="padding-top: 7px;"><em>实战案例</em></a></div>
                        <div class="label_item" style="color: rgb(115, 165, 0); left: 877px; z-index: 5;"><a href="#" target="_blank" style="padding-top: 7px;"><em>微信小程序</em></a></div>
                        <div class="label_item" style="color: rgb(0, 164, 204); left: 946px; z-index: 4;"><a href="#" target="_blank" style="padding-top: 7px;"><em>Canvas</em></a></div>
                        <div class="label_item hideR" style="color: rgb(94, 49, 208); left: 956px; z-index: 3; /*right: 56px;*/"><a href="#" target="_blank" style="padding-top: 7px;"><em>前端工具</em></a></div>
                        <div class="label_item hideR" style="color: rgb(7, 166, 134); left: 972px; z-index: 2;"><a href="#" target="_blank" style="padding-top: 7px;"><em>webpack</em></a></div>
                        <div class="label_item" style="color: rgb(49, 49, 49); left: 1038px; z-index: 1;"><a href="#" target="_blank" style="padding-top: 7px;"><em>Git</em></a></div>
                    </div>
                </div>
                <div id="suosuo">
                    <div class="guide">
                        <div class="guideBox">
                            <a href="#" class="guideBlock" target="_blank"><i class="newuser">&nbsp;</i><span>新手学习指南</span></a>
                        </div>
                        <div class="guideBox">
                            <a href="#" class="guideBlock" target="_blank"><i class="vip">&nbsp;</i><span>加入VIP会员</span></a>
                        </div>
                        <div class="guideBox">
                            <div class="guideBlock" id="guidWechat"><i class="take"></i><span>订阅号得福利</span></div>
                        </div>
                    </div>
                    <div class="search-box">
                        <input id="search" class="text" type="text" placeholder="搜索课程" />
                        <a class="btn" id="searchBtn" href="javascript:;"></a>
                    </div>
                </div>
            </div>
            <div id="daohang_xia">
                <div id="xia_kuang">
                    <div class="title">
                        <p class="left">推荐课程</p>
                    </div>
                      <div class="bd">
                <a class="sPrev" href="javascript:void(0)"></a>
            <ul>
                <li class="on1">
                    <a href="#" target="_blank" class="zi">
                        手把手带你探索Promise源码
                    </a>
                </li>
                <li class="on2">
                    <a href="#" target="_blank" class="zi">
  Axios源码解析与实现
                    </a>
                </li>
                <li class="on3">
                    <a href="#" target="_blank" class="zi">
                       全栈架构师的必备技能-完成一个CLI工具
                    </a>
                </li>
                <li class="on4">
                    <a href="#" target="_blank" class="zi">
                     进击的全栈架构师
                    </a>
                </li>
                <li class="on5">
                    <a href="#" target="_blank" class="zi">
                       剖析最新VUE3.0 语法
                    </a>
                </li>
                 <li class="on6">
                    <a href="#" target="_blank" class="zi">
                       剖析最新VUE3.0 语法
                    </a>
                </li>
                 <li class="on7">
                    <a href="#" target="_blank" class="zi">
                       剖析最新VUE3.0 语法
                    </a>
                </li>
            </ul>
                <a class="sNext" href="javascript:void(0)"></a>
        </div>
                </div>
            </div>
        </div>
           <script type="text/javascript">
               /* 内层图片无缝滚动 */
               $(".bd").slide({ mainCell: "ul", vis: 5, prevCell: ".sPrev", nextCell: ".sNext", effect: "leftMarquee", interTime: 50, autoPlay: true, trigger: "click" });
               /* 外层tab切换 */
              $("#xia_kuang").slide({ titCell: ".parHd li", mainCell: ".parBd" });
                </script>
        <%--第一阶段 前端导航--%>
        <div id="qianduan">
            <div id="qianduan_daohang">
                  <p class="percent"><span>0</span>%</p>
                <h3><span style="font-weight:normal; font-size: 24px;">第一阶段： </span>前端初窥</h3>
                <p class="oneji"></p>
            </div>
        </div>
        <%--第一阶段 前端内容--%>
        <div id="qianduan_content">
            <div id="qianduan_conter">
                <div class="class-list">
								<div class="class-list-num">
					<span class="num num-0"></span>
					<span class="num num-1"></span>
				</div>
								<div class="class-one-level-left" data-cid="38">
					<div class="class-one-level-right">
						<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[0]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[0]).KeChengID %>" target="_blank" >
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><span class="class-text"><%=((KechengandZhangjie)GETmode()[0]).KeChengName %></span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[0]).He %>集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level only" data-cid="356">
						<div class="class-one-level-right">
							<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[4]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[4]).KeChengID %>" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text"><%=((KechengandZhangjie)GETmode()[4]).KeChengName %></span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[4]).He %>集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list"><div class="list-line2"></div>
                    <div id="aa"></div>
								<div class="class-list-num">
					<span class="num num-0"></span>
					<span class="num num-2"></span>
				</div>
								<div class="class-one-level-left" data-cid="664">
					<div class="class-one-level-right">
						<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[3]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[3]).KeChengID %>" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><span class="class-text"><%=((KechengandZhangjie)GETmode()[3]).KeChengName %></span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-righta">共<%=((KechengandZhangjie)GETmode()[3]).He %>集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
                <div class="class-list"><div class="list-line"></div>
								<div class="class-list-num">
					<span class="num num-0"></span>
					<span class="num num-3"></span>
				</div>
								<div class="class-one-level-left" data-cid="40">
					<div class="class-one-level-right">
						<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[6]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[6]).KeChengID %>" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><span class="class-text"><%=((KechengandZhangjie)GETmode()[6]).KeChengName %></span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[6]).He %>集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
                <div class="class-list"><div class="list-line2"></div>
								<div class="class-list-num">
					<span class="num num-0"></span>
					<span class="num num-4"></span>
				</div>
								<div class="class-one-level-left" data-cid="42">
					<div class="class-one-level-right">
						<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[7]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[7]).KeChengID %>" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text"><%=((KechengandZhangjie)GETmode()[7]).KeChengName %></span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[7]).He %>集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
                <div class="class-list zz">
								<div class="class-list-num"><div class="class-arrow" style="height: 196px;"></div><div class="list-line-vertical" style="height: 235.5px;"></div>
					<span class="num num-0"></span>
					<span class="num num-5"></span>
				</div>
								<div class="class-one-level-left" data-cid="44">
					<div class="class-one-level-right">
						<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[8]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[8]).KeChengID %>" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text"><%=((KechengandZhangjie)GETmode()[8]).KeChengName %></span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[8]).He %>集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="376">
						<div class="class-one-level-right">
							<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[9]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[9]).KeChengID %>" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text"><%=((KechengandZhangjie)GETmode()[9]).KeChengName %></span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[9]).He %>集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="13">
						<div class="class-one-level-right">
							<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[13]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[13]).KeChengID %>" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text"><%=((KechengandZhangjie)GETmode()[13]).KeChengName %></span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[13]).He %>集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="132">
						<div class="class-one-level-right">
							<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[10]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[10]).KeChengID %>" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text"><%=((KechengandZhangjie)GETmode()[10]).KeChengName %></span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[10]).He %>集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="15">
						<div class="class-one-level-right">
							<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[11]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[11]).KeChengID %>" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text"><%=((KechengandZhangjie)GETmode()[11]).KeChengName %></span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[11]).He %>集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="441">
						<div class="class-one-level-right">
							<a href="../liuyong/Chapter.aspx?name=<%=((KechengandZhangjie)GETmode()[12]).KeChengName %>&id=<%=((KechengandZhangjie)GETmode()[12]).KeChengID %>" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text"><%=((KechengandZhangjie)GETmode()[12]).KeChengName %></span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共<%=((KechengandZhangjie)GETmode()[12]).He %>集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
            </div>
        </div>
        <%--   中间间隔背景1--%>
        <div id="backone"></div>
        <%--  第二阶段小试牛刀--%>
        <div id="two">
            <div id="two_content">
                <div class="phase-name" id="3">
				<span class="percent"><canvas class="circle" width="100" height="100">共436集/7ccd7b</canvas><span>0</span>%</span>
				<h3><span>第二阶段： </span>小试牛刀</h3>
				<p>436集（预计学习2个月）</p>
			</div>
                <div class="class-list">
								<div class="class-list-num">
					<span class="num num-0"></span>
					<span class="num num-6"></span>
				</div>
								<div class="class-one-level-left" data-cid="651">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/651" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><i class="serialize-icon"></i><span class="class-text">JavaScript基础部分（新）</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共104集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-list-num"><div class="list-line-vertical" style="height: 260.5px;"></div>
					<span class="num num-0"></span>
					<span class="num num-7"></span>
				</div>
								<div class="class-one-level-left" data-cid="83">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/83" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><span class="class-text">JavaScript基础部分</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共78集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="555">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/555" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">前端知识体系详解</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="531">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/531" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">变幻莫测的上下文对象-this专场</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="545">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/545" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">全栈远程班测试题解析</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="478">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/478" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">原生 JS 逐行实现购物车功能</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="482">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/482" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">ECMAScript 测试题讲解</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="87">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/87" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JS基础阶段的课后练习</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共20集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="cclass-list">
								<div class="class-list-num"><div class="llist-line-vertical" style="height: 340px;"></div>
					<span class="num num-0"></span>
					<span class="num num-8"></span>
				</div>
								<div class="class-one-level-left" data-cid="69">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/69" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">DOM</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共14集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="315">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/315" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">商品分类筛选</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共7集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="317">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/317" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">邮件拖拽删除功能</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共6集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="11">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/11" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">你真的了解JS吗？</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共2集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="cclass-list">
								<div class="class-list-num"><div class="list-line-vertical" style="height: 475px;"></div>
					<span class="num num-0"></span>
					<span class="num num-9"></span>
				</div>
								<div class="class-one-level-left" data-cid="81">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/81" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">JS中级：BOM\EVENT</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共18集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="561">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/561" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JS 小游戏：2048</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="570">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/570" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JS 小游戏：十滴水</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共3集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="617">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/617" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">高效便捷的工作流程引导工具</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共6集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="466">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/466" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">百度网盘：玩转文件夹框选功能</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共7集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="472">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/472" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">事件（Event）测试题讲解</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="140">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/140" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JQ+TweenMax 的全站实现</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共23集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="17">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/17" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">“桌面级应用-腾讯微云”核心功能实现</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共19集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="130">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/130" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">棍子英雄游戏实战</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共14集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="57">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/57" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JS 运动详解</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共27集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="cclass-list">
								<div class="class-list-num"><div class="list-line-vertical" style="height: 475px;"></div>
					<span class="num num-1"></span>
					<span class="num num-0"></span>
				</div>
								<div class="class-one-level-left" data-cid="91">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/91" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">AJAX课程</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共21集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="577">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/577" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">前后端交互之 WebServer 搭建与实现</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共5集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="136">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/136" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JS原创视频教程-实例类</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共19集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="155">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/155" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JS原创视频教程-知识点类</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共11集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="cclass-list" style="margin-bottom: 70px;">
								<div class="class-list-num"><div class="class-arrow" style="height: 96.5px;"></div><div class="list-line-vertical" style="height: 105.5px;"></div>
					<span class="num num-1"></span>
					<span class="num num-1"></span>
				</div>
								<div class="class-one-level-left" data-cid="63">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/63" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">正则表达式</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共11集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
            </div>
        </div>
        <%--   中间间隔背景2--%>
        <div id="backtwo"></div>
        <%--  第三阶段渐入佳境--%>
        <div id="three">
            <div id="three_content">
                <div class="phase-name" id="4">
				<span class="percent"><canvas class="circle" width="100" height="100">共397集/f24874</canvas><span>0</span>%</span>
				<h3><span>第三阶段： </span>渐入佳境</h3>
				<p>397集（预计学习1.5个月）</p>
			</div>
                <div class="class-list">
								<div class="class-list-num">
					<span class="num num-1"></span>
					<span class="num num-2"></span>
				</div>
								<div class="class-one-level-left" data-cid="147">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/147" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">JS面向对象及组件开发</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共36集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level only" data-cid="547">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/547" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《原生JS开发ToDoList组件》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-list-num"><div class="list-line-vertical" style="height: 135.5px;"></div>
					<span class="num num-1"></span>
					<span class="num num-3"></span>
				</div>
								<div class="class-one-level-left" data-cid="101">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/101" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">HTML5详解</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共38集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="574">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/574" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">canvas 实例：图片滤镜系统</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共8集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="167">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/167" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">HTML5梦工厂 - 码农俱乐部视频</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共45集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="649">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/649" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">微云网盘H5拖拽无刷新附件上传</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共9集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-list-num"><div class="list-line-vertical" style="height: 125.5px;"></div>
					<span class="num num-1"></span>
					<span class="num num-4"></span>
				</div>
								<div class="class-one-level-left" data-cid="400">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/400" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">Less</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共16集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-list-num">
					<span class="num num-1"></span>
					<span class="num num-5"></span>
				</div>
								<div class="class-one-level-left" data-cid="23">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/23" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">bootstrap教程</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共17集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-list-num">
					<span class="num num-1"></span>
					<span class="num num-6"></span>
				</div>
								<div class="class-one-level-left" data-cid="461">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/461" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">自定义栅格系统</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共4集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-list-num"><div class="list-line-vertical" style="height: 485.5px;"></div>
					<span class="num num-1"></span>
					<span class="num num-7"></span>
				</div>
								<div class="class-one-level-left" data-cid="103">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/103" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">《移动端开发深度揭秘》公开课</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共27集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="579">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/579" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">时尚优雅的菜单切换效果</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共3集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="572">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/572" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">移动端那些“俏皮有趣”的滑屏交互</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="409">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/409" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text">纯 CSS3 打造实用小组件</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共7集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="330">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/330" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">H5移动端QQ消息列表</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共13集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="122">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/122" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">妙味课堂-移动前端开发视频</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="124">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/124" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">移动端实战系列视频教程</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共14集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="126">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/126" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">微信 H5 应用：打怪小游戏</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共21集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="128">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/128" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《移动端开发小技巧实例》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共17集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="85">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/85" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">VIP公开课--B联盟 - JavaScript</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共14集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="99">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/99" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">CSS3详解</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共22集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="631">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/631" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">玩转3D交互案例讲解</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共3集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-list-num"><div class="class-arrow" style="height: 196px;"></div><div class="list-line-vertical" style="height: 675px;"></div>
					<span class="num num-1"></span>
					<span class="num num-8"></span>
				</div>
								<div class="class-one-level-left" data-cid="487">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/487" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><span class="class-text">React - 移动端布局实战</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共21集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
										<div class="class-one-level-line"></div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="535">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/535" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《炙手可热的react学习路径》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共7集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="499">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/499" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《移动端滑屏组件：better-scroll》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共7集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="259">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/259" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">移动端组件开发</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共9集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="271">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/271" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text">Swiper  和 TweenMax 移动端实战</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共22集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="515">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/515" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《React-移动端实战》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共5集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
            </div>
        </div>
        <%--   中间间隔背景3--%>
        <div id="backthree"></div>
        <%--    第四阶段得心应手--%>
        <div id="four">
            <div id="four_content">
                <div class="phase-name" id="5">
				<span class="percent"><canvas class="circle" width="100" height="100">共405集/2bc2d7</canvas><span>0</span>%</span>
				<h3><span>第四阶段： </span>得心应手</h3>
				<p>405集（预计学习1个月）</p>
			</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="358">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/358" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">webpack实用性基础教程</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共22集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="436">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/436" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">前端模块打包工具：Webpack</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共3集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="637">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/637" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">Webpack原理剖析</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共8集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="367">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/367" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">PHP 后端探索之：新闻系统实战开发</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共10集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="334">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/334" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">PHP 后端探索之：SQL 数据库</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共10集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="322">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/322" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">PHP 后端探索之：基础入门</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共19集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="21">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/21" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">JS数学揭密之【三角函数】</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共7集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="134">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/134" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text">坚果手机效果</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共6集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="138">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/138" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">玩转CSS3：酷炫3D立体几何图形</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共13集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="142">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/142" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">妙味经典官网交互揭秘</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共32集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="161">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/161" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">算法与数据结构</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共25集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="157">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/157" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">论坛问题解答系列</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共8集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="171">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/171" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">俄罗斯方块游戏实战</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共20集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="159">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/159" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">JavaScript面试题系列</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共5集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="633">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/633" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">2019春季WEB面试题系列</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共17集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="541">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/541" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《2018 经典面试题解析》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="506">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/506" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">商城全栈开发远程班 测试题解析</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共7集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="494">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/494" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">WEB 测试题之：面向对象与框架 测试题解析</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共5集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="432">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/432" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《前端工程师应该如何高效率入职》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共10集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="434">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/434" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《JS 测试题解析》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共16集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="443">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/443" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">JS 实战：员工信息管理</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共7集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="453">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/453" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">微信小程序基础</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共25集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="519">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/519" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">微信小程序搭建+框架+案例</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="525">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/525" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">微信小程序轮播组件和电影小程序实例</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="153">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/153" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text">微信“小程序”开发实战</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="417">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/417" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">微信小程序开发 - 电影预告</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共17集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="523">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/523" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">微信小程序案例：音乐 App</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共12集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="627">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/627" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">小程序：多端统一开发框架 Taro</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共1集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="163">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/163" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">SVG 入门教程</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共14集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="669">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/669" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">小程序云开发新时代</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共1集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="165">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/165" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">玩转git与github</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共15集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level only" data-cid="537">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/537" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">随心所欲玩转 Git</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
            </div>
        </div>
        <%--   中间间隔背景4--%>
        <div id="backfour"></div>
        <%--第五阶段玩转自如--%>
        <div id="five">
            <div id="five_content">
                <div class="phase-name" id="6">
				<span class="percent"><canvas class="circle" width="100" height="100">共654集/9865e2</canvas><span>0</span>%</span>
				<h3><span>第五阶段： </span>玩转自如</h3>
				<p>654集（预计学习2.5个月）</p>
			</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="149">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/149" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">JavaScript模块化开发</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共13集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="671">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/671" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">JS训练营-从axios源码解析到HTTP协议与安全</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共21集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="680">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/680" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">Axios源码解析与实现</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共9集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="151">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/151" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">ECMAScript6</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共24集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="502">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/502" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《ECMAScript异步编程》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共5集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="557">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/557" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">手写 bind 函数和 Promise 源码实现</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共5集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="682">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/682" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">手把手带你探索Promise源码</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共9集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="539">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/539" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《深度详解 ECMAScript 6 》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="521">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/521" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">TypeScript</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共5集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="370">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/370" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><span class="class-text">《React 实战答疑+精品案例》公开课</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共8集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="33">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/33" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">React.js实战</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="29">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/29" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><span class="class-text">《React 实践分享》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="423">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/423" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">React 前置学习</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共3集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="425">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/425" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《便笺应用组件的数据处理》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共3集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="362">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/362" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">React 基础</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共5集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="364">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/364" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">利用 transition 实现 react 动画</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="378">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/378" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">React 进阶</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共23集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="306">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/306" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">Redux 精品先导教程</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共10集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="404">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/404" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">React 实战：CNode</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共23集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="629">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/629" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">React16 虚拟dom 原理剖析</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共1集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="89">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/89" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">jQuery课程</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共36集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="65">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/65" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">jQuery实战开发远程课视频</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共31集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="67">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/67" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">jQuery Ui 光速入门</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="36">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/36" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">jQuery源码分析视频</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共116集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="445">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/445" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">vue 基础入门</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共20集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="224">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/224" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">vue 实战开发系列</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共20集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="625">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/625" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">深入Vue组件设计与开发</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共1集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="385">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/385" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">精品实战案例-四步搞定 VUE</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共8集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="559">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/559" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">解惑Vue组件之间的通信</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共5集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="491">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/491" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">Vue 案例：打造微云文件管理系统</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共5集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="447">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/447" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">Vue 案例：酷狗音乐实战开发</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共3集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="332">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/332" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">基于 “vue、UI组件库” 打造网易新闻应用</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共6集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="411">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/411" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">登录 Vue 星球打通实战案例“通行证”</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共15集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="449">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/449" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">vue 服务端渲染 SSR</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="641">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/641" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">如何通过数据劫持实现mvvm框架</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共9集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="647">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/647" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">vue-router前端路由原理剖析</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共9集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="675">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/675" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">剖析最新VUE3.0 语法</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共7集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="169">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/169" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">Angularjs系列视频</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共38集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level only" data-cid="261">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/261" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">基于AngularJS的组件库开发</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共11集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="173">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/173" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">初探backbone系列</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共5集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="175">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/175" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">Node.js 入门教程</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共28集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level " data-cid="504">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/504" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《项目构建工具-脚手架》实现思路</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共6集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level " data-cid="7">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/7" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">Node.js 实战开发：博客系统</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共26集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
										<div class="class-one-level-left class-two-level last" data-cid="639">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/639" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">Koa2源码解读</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共8集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="406">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/406" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">React Native 基础</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共23集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
															<div class="class-level-expand"></div>
									</div>
								<div class="class-two-level-box">
										<div class="class-one-level-left class-two-level only" data-cid="430">
						<div class="class-one-level-right">
							<a href="/study/show/chapter/430" target="_blank">
								<div class="class-one-level-btn-left">
									<div class="class-one-level-btn-right">
										<h4><i class="vip-icon"></i><span class="class-text">《走进 React Native 的精彩世界》公开课</span></h4>
										<div class="class-video-num-left">
											<div class="class-video-num-right">共4集</div>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="class-two-level-line"></div>
					</div>
									</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="645">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/645" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">Flutter认知与入门</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共9集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="684">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/684" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">全栈架构师的必备技能-完成一个CLI工具</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共6集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
                <div class="class-list">
								<div class="class-one-level-left" data-cid="678">
					<div class="class-one-level-right">
						<a href="/study/show/chapter/678" target="_blank">
							<div class="class-one-level-btn-left">
								<div class="class-one-level-btn-right">
									<h4><i class="vip-icon"></i><span class="class-text">进击的全栈架构师</span></h4>
									<div class="class-video-num-left">
										<div class="class-video-num-right">共8集</div>
									</div>
								</div>
							</div>
						</a>
					</div>
														</div>
							</div>
            </div>
        </div>
        <%--   中间间隔背景4--%>
        <div id="backfive"></div>
        <%-- 尾部导航--%>
        <div id="foot"></div>
    </form>
</body>
</html>
